<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>足迹</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">类目名</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="name" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="categoryTable" lay-filter="categoryTable"></table>
    </div>

    <script id="tool" type="text/html" >
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script id="tableBar" type="text/html">
        <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </a>
    </script>

    <script id="image" type="text/html">
        <img src="/file/fc/showImg/{{d.imagePath}}" style="border-radius: 25px;width: 25px;height: 25px">
    </script>

    <script id="picture" type="text/html">
        <img src="/file/fc/showImg/{{d.picturePath}}" style="border-radius: 25px;width: 25px;height: 25px">
    </script>
</div>


<script>
    layui.config({
        base:'/js/'
    })
    var $,active;
    layui.use(['table','form','jquery','layer','treeTable'],function(){
        var table = layui.table,layer = layui.layer,form = layui.form,treeTable=layui.treeTable;
        $ = layui.jquery;

        //加载表格
        var tree = function (){
            treeTable.render({
                elem:'#categoryTable',
                url:'/system/category/findAll',
                height:'full-160',
                toolbar: '#tableBar',
                tree:{
                    iconIndex:1,
                    isPidData:true,
                    idName:'id',
                    pidName:'pid'
                },
                where:{
                    status:0
                },
                cols:[
                    [
                        {field:'id',title: '类目ID',width:100,align: 'center'},
                        {field:'name',title: '类目名',width: 250,align: 'center'},
                        {field:'image',title: '类目图标',width: 150,templet: '#image',align: 'center'},
                        {field:'picture',title: '类目图片',width: 150,templet: '#picture',align: 'center'},
                        {field:'content',title: '简介',align: 'center'},
                        {field:'level',title:'类目级别',width:100,align: 'center',
                            templet:function (res) {
                                var level = res.level;
                                if (level == 1){
                                    return "<span style='color: #d21148'>一级类目</span>";
                                }else if (level == 2){
                                    return "<span style='color: #4f62b8'>二级类目</span>";
                                }else {
                                    return "<span style='color: #635f5c'>暂无分级</span>";
                                }
                            }
                        },
                        {fixed:'right',title: '操作',toolbar:'#tool',width: 300,align: 'center' }
                    ]
                ]
            })
        }
        tree();

        var active = {
            addOrUpdate:function (title,content) {
                var b = false;
                top.layer.open({
                    type:2,
                    title:title,
                    content:content,
                    area:['700px','750px'],
                    btn:['确认','取消'],
                    btn1:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function (i,o) {
                        if(b) tree();
                    }
                })
            }
        }

        treeTable.on('toolbar(categoryTable)',function (obj) {
            var event = obj.event;
            if ('add' == event){
                active.addOrUpdate('创建新类目','/page/mallManagement/categoryAdd')
            }
        })

        treeTable.on('tool(categoryTable)',function (obj) {
            var event = obj.event;
            if ('edit' == event){
                active.addOrUpdate('编辑类目','/page/mallManagement/categoryEdit/'+obj.data.id)
            }else if ('delete' == event){
                $.ajax({
                    type:'post',
                    url: '/system/category/delete',
                    data:{
                        id:obj.data.id
                    },
                    dataType:'json',
                    success:function (result) {
                        layer.msg(result.msg)
                        if (result.is){
                            tree();//刷新表
                        }
                    }
                })
            }
        })

        //监听搜索按钮
        form.on('submit(searchBtn)',function(data){
            var dataForm = data.field;
            treeTable.reload('categoryTable',{
                where:{
                    name:dataForm.name
                }
            })
        })
    });




</script>
</body>
</html>
